<template>
    <div class=page-login>
        <div class="login-header">
            <a href="/" class="logo" />
        </div>
        <div class="page-container">
            <img src="//s0.meituan.net/bs/file/?f=fe-sso-fs:build/page/static/banner/www.jpg" width="480" height="370" alt="美团网"/>
            <div class="form">
                 <h4 v-if="error" class="tips"><i/>
                    {{ error }}
                </h4>
                <p><span>账号登录</span></p>
                <el-input type="text"  v-model="username" />
                <span class="iconfont user">&#xe632;</span>
                <el-input @keyup.enter.native="login()"  type="password" v-model="password"  />
                <span class="iconfont password">&#xe66c;</span>
                <div class="footer">
                    <el-checkbox v-model="checked">7天内自动登录</el-checkbox>
                    <b>忘记密码?</b>
                    <el-button type="success" size="mini" class="btn-login" @click="login">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import CryptoJS from "crypto-js"
export default {
    layout: 'blank',
    data() {
        return {
           checked: '',
           username: '',
           password: '',
           error: ''
        }
    },
    methods: {
        login() {
            const _this = this
            axios.post('/users/signin', {
                username: window.encodeURIComponent(_this.username),
                password: CryptoJS.MD5(_this.password).toString(),
            }).then(({status,data}) => {
                if (status === 200) {
                    if (data && data.code === 0) {
                        location.href = '/'
                    }
                    else  {
                        _this.error = data.msg
                    }
                }
                else {
                    _this.error = `服务器出错,错误码为${status}`
                }
                setTimeout(()=> {
                    _this.error = ''
                },1500)
            })
        }
    }
}
</script>

<style lang="scss">
    .page-login {
        .login-header {
            width: 980px;
            height: 54px;
            margin: 40px auto 30px;
            // background: red;
            .logo {
                background-image: url(//s0.meituan.net/bs/file/?f=fe-sso-fs:build/assets/sp-retina.b95a7dd.png);
                background-position: 0 !important;
                background-size: contain !important;
                width: 82px;
                height: 54px;
                display: block;
            }
        }
        .page-container {
            width: 980px;
            margin: 0 auto;
            .form {
                width: 270px;
                float: right;
                margin-right: 120px;
                .tips {
                    margin-bottom: 10px;
                    padding: 10px;
                    border: 1px solid #f5d8a7;
                    border-radius: 2px;
                    background: #fff6db;
                    font-size: 12px;
                    padding-left: 26px;
                    >i {
                        position: relative;
                        &:after {
                            position: absolute;
                            display: inline-block;
                            width: 17px;
                            height: 17px;
                            font-family: iconfont;
                            font-style: normal;
                            content: "\e64d";
                            font-size: 28px;
                            top: -9px;
                            left: -24px;
                        }
                    }
                }
                p {
                    span {
                        margin-left: 8px;
                        display: block;
                        margin-bottom: 10px;
                        font-weight: 400;
                        color: #666;
                    }
                }
                .el-input {
                    padding-left: 10px;
                    box-sizing: border-box;
                }
                .user {
                    position: relative;
                    bottom: 30px;
                    left: 4px;
                    font-size: 20px;
                    display: inline-block;
                    // display: block;
                    margin-left: 5px;
                }
                .password {
                    position: relative;
                    bottom: 30px;
                    left: 4px;
                    font-size: 16px;
                    display: inline-block;
                    // display: block;
                    margin-left: 5px;
                }
                .footer {
                    margin-left: 8px;
                    b {
                        float: right;
                    }
                    .btn-login {
                        margin-top: 20px;
                        width: 100%;
                        height: 35px;
                        font-size: 14px;
                    }
                }
            }
        }
    }
</style>


